<template>
  <div class="home-root">
    <header>
        推八利息减免计算器
    </header>
    <div class="container">
      <div class="main">
        <van-form @submit="onSubmit">
<!--          <van-field-->
<!--            v-model="dataForm.name"-->
<!--            name="姓名"-->
<!--            label="姓名"-->
<!--            placeholder="请输入姓名"-->
<!--          />-->
          <van-field
            v-model="dataForm.phone"
            name="手机号"
            required
            label="手机号"
            type="tel"
            placeholder="请输入手机号"
            :rules="[
              { required: true, message: '请输入联系人手机' },
              { pattern: /^1\d{10}$/, message: '手机号码格式错误！'}
            ]"
          />
          <van-field
            v-model="dataForm.org"
            name="贷款机构"
            label="贷款机构"
            placeholder="请输入贷款机构名"
          />
          <van-field
            v-model="dataForm.total_money"
            name="到账总额"
            required
            label="到账总额"
            type="number"
            placeholder="到账总额"
            :rules="[{ required: true, message: '请填到账总额', min: 0 }]"
          />
          <van-field
            v-model="dataForm.number"
            type="digit"
            name="期数"
            required
            label="期数"
            placeholder="期数"
            :rules="[{ required: true, message: '请填写正确的期数', min: 1 }]"
          />
          <van-field
            v-model="dataForm.instalment"
            name="每期金额"
            required
            label="每期金额"
            type="number"
            placeholder="每期金额"
            :rules="[{ required: true, message: '请填写每期金额', min: 0}]"
          />
          <van-field
            v-model="dataForm.pay_number"
            type="digit"
            name="已还期数"
            label="已还期数"
            placeholder="请输入已还期数"
          />
<!--          <van-field-->
<!--            v-model="dataForm.overdue_number"-->
<!--            type="digit"-->
<!--            name="逾期期数"-->
<!--            label="逾期期数"-->
<!--            placeholder="请输入逾期期数"-->
<!--          />-->
          <div style="margin: 16px;">
            <van-button v-if="!is_calculate" round block type="info" native-type="submit">开始计算</van-button>
          </div>
        </van-form>
      </div>
      <div v-if="is_calculate" class="footer">
        <div class="title">计算结果</div>
        <div class="footer-item">
          <div class="footer-item__left">平台利息：</div>
          <div class="footer-item__right"><span class="bold">{{ interest }}</span>元</div>
        </div>
        <div class="footer-item">
          <div class="footer-item__left">减免利息最小：</div>
          <div class="footer-item__right"><span class="danger">{{ min_money }}</span>元</div>
        </div>
        <div class="footer-item">
          <div class="footer-item__left">减免利息最大：</div>
          <div class="footer-item__right"><span class="danger">{{ max_money }}</span>元</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      dataForm: {
        name: '',
        phone: '',
        org: '',
        total_money: '',
        number: 12,
        instalment: '',
        pay_number: '',
        overdue_number: ''
      },
      is_calculate: false
    }
  },
  computed: {
    // 应付利息
    interest() {
      const dataForm = this.dataForm
      // 每月还款
      const instalment = dataForm.instalment || 0
      // 期数
      const number = dataForm.number || 0
      // 贷款总额
      const total_money = dataForm.total_money || 0
      // return ((instalment * number - total_money - this.max_money)).toFixed(2)
      return (instalment * number - total_money).toFixed(2)
    },
    // 最小减免
    min_money() {
      const dataForm = this.dataForm
      // 每月还款
      const instalment = dataForm.instalment || 0
      // 期数
      const number = dataForm.number || 0
      // 贷款总额
      const total_money = dataForm.total_money || 0
      // 本来的利息
      // const pay_money = instalment * (dataForm.pay_number || 0)
      const money = ((instalment * number) - this.delData(total_money, number, 0.24) * number).toFixed(2)
      return money < 0 ? 0 : money
    },
    // 最大减免
    max_money() {
      const dataForm = this.dataForm
      // 每月还款
      const instalment = dataForm.instalment || 0
      // 期数
      const number = dataForm.number || 0
      // 贷款总额
      const total_money = dataForm.total_money || 0
      // 已还金额
      // const pay_money = instalment * (dataForm.pay_number || 0)
      const money = ((instalment * number) - this.delData(total_money, number, 0.154) * number).toFixed(2)
      return money < 0 ? 0 : money
    }
  },
  methods: {
    onSubmit(values) {
      const dataForm = this.dataForm
      // 每月还款
      const instalment = dataForm.instalment || 0
      // 期数
      const number = dataForm.number || 0
      // 贷款总额
      const total_money = dataForm.total_money || 0
      if (instalment * number < total_money) {
        this.$message.error('每期金额乘期数金额必须大于到账总额')
        return false
      }
      this.is_calculate = true
      axios.post('/addUser', {
        ...dataForm,
        overdue_number: dataForm.overdue_number || 0,
        pay_number: dataForm.pay_number || 0
      })
    },
    delData(total, number, rate) {
      return total * (rate / 12 * Math.pow((1 + rate / 12), number)) / (Math.pow((1 + rate / 12), number) - 1)
    }
  }
}
</script>

<style lang="scss" scoped>
  $color: #1989fa;
  $radius-length: 6px;
  $color-danger: #ee0a24;
  header {
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $color;
    padding: 20px;
    color: #ffffff;
  }
  .container {
    padding: 12px;
  }
  .main {
    margin-bottom: 24px;
    padding: 12px 0;
    border: 1px solid $color;
    border-radius: $radius-length;
  }
  .footer {
    padding: 12px;
    .title {
      text-align: center;
      font-size: 24px;
      font-weight: bold;
    }
    border: 1px solid $color;
    border-radius: $radius-length;
    .danger {
      font-size: 20px;
      font-weight: bold;
      color: $color-danger;
    }
    &-item {
      display: flex;
      margin-top: 24px;
    }
    .bold {
      font-weight: bold;
    }
  }
</style>
